<html>
  <head>
    <link rel="stylesheet" href="/static/css/groups.css" type="text/css">
    <script src="http://www.google.com/jsapi?key={{ API_KEY }}" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('jquery','1.6.1');
    </script>
    <script src="/static/js/groups.js" type="text/javascript"></script>
    <script type="text/javascript">
      var GROUP_LIST = {{ groupsJSON }};
      setSite( "{{ SITE }}" );
      $(document).ready( addRows );
    </script>
  </head>
  <body>
    <div id="GoogleGroupsWebUI_table">
      <table>
	<thead>
	<tr id="GoogleGroupsWebUI_table_header">
	  <th colspan="2" sort="string" onclick="sortTable('name')">Group Name <span id="GoogleGroupsWebUI_by_name" name="arrow">&rarr;</span></th>
	  <th sort="string" onclick="sortTable('id')">Group Address<span id="GoogleGroupsWebUI_by_id" name="arrow">&rarr;</span></th>
	  <th sort="string" onclick="sortTable('permission')">Scope<span id="GoogleGroupsWebUI_by_permission" name="arrow">&rarr;</span></th>
	  <th sort="int" onclick="sortTable('owners')">Owners <span id="GoogleGroupsWebUI_by_owners" name="arrow">&rarr;</span></th>
	  <th sort="int" onclick="sortTable('members')">Members <span id="GoogleGroupsWebUI_by_members" name="arrow">&rarr;</span></th>
	  <th>Links</th>
	</tr>
	<tr id="GoogleGroupsWebUI_table_filter">
	  <td colspan="2"><input type="text" onkeyup="filter(this,'name')" width="100%"></td>
	  <td><input type="text" onkeyup="filter(this,'id')" width="100%"></td>
	  <td><input type="text" onkeyup="filter(this,'permission')" width="100%"></td>
	  <td colspan="3">Quick Filter</td>
	</tr>
	<thead>
	<tbody id="GoogleGroupsWebUI_table_rows">
	</tbody>
      </table>
    </div>
  </body>
</html>
